// # SlickView
// ##author pengguangzong
// 多张图片通过滑动左右切换
//
//
// ## 配置
//
// 变量 | 类型 | required | 描述
// ----|------|----------|-----
// item  | 数组 | true    | 数组元素：str str是图片路径
// lazyLoad | string | false| 是否按需加载，在触发事件时加载图片，ondemand为延时加载
// 例子：
//
// ```js
// {
//   type: "SlickView",
//   slickOptions: {lazyLoad:"ondemand"},
//   items:[
//   {
//     src: "/runtime/images/56.jpg"
//   },
//   {
//     src: "/runtime/images/uu.jpg"
//   }
//  ]
// }
// ```
////
define([
  './BaseView',
  'slick'
], function(BaseView, Slick){

  return BaseView.extend({

    type: 'SlickView',
    slickOptions:{},

    initialize: function(){
      var slick_el = document.createElement('div');
      slick_el.classList.add('slick-container');
      this.el.appendChild(slick_el);
    },
    createItem: function(item){
      var carouselItem = document.createElement('div');
      carouselItem.classList.add('image');

      var img = document.createElement('img');
      var key = item.src?item.src:this.defaultimage;
      var src = key;
      if (key.indexOf("data:image") != 0
        && key.indexOf("http://") != 0 && key.indexOf("./") != 0 ) {
        key = key.replace(/^[\.\/]+/g, "/");
        src = ((window.app && window.app.url) ? window.app.url : "") + key;
      }
      if (this.slickOptions.lazyLoad == 'ondemand') {
        img.setAttribute('data-lazy', src);
      } else {
        img.src = src;
      }
      var image = new Image();
      var _me = this;
      image.src = src;
      image.onload = (function(_me) {
        return function() {
          var mScale = 16/9;
          if (_me.options.scale) {
            if (_me.options.scale == '43') {
              mScale = 4/3;
            }else if(_me.options.scale == '11'){
              mScale = 1;
            }else if(_me.options.scale == 'auto'){
              var autoWidth = this.width;
              var autoHeight = this.height;
              mScale = autoWidth/autoHeight;
            }
          }
          var height = _me.$(".slick-container").width() / mScale;
          img.setAttribute('height', height);
        }
      })(_me);
      if (item.linkURL) {
        img.addEventListener('click',function(event){
          // backbone.history.navigate
          window.location.href = item.linkURL;
        },false);
      }
      carouselItem.appendChild(img);
      return carouselItem;
    },
    configure: function(options){
      _me = this;
      if (this.slick) this.$('.slick-container').slick('unslick').empty();

      var items;
      if (options.key) {
        var curModel = this.getModel();
        items = curModel ? curModel.get(options.key) : options.items;
      }
      else if (options.items) {
        items = options.items;
      }

      if (items) {
        items.forEach(_.bind(function(item){
          var temp = item;
          if(typeof item ==  "string"){
            temp = {
              src: item
            }
          }
          this.$('.slick-container').append( this.createItem(temp));
        }, this));

        var slickOpts = _.extend({}, this.slickOptions, options.slickOptions);
        setTimeout(_.bind(function(){
          this.slick = this.$('.slick-container').slick(slickOpts);
          if(this.$el.width() > this.$el.parent().width()) {
            this.$el.width(this.$el.parent().width());
          }
        }, this), 0);
      }
    },

  });
});
